<template>
  <div class="app-container">
    <el-table
      :data="listData"
      :span-method="objectSpanMethod"
      border
      style="width: 100% margin-top: 20px"
      @cell-click="handle"
    >
      <el-table-column prop="date" label="时间" width="180"> </el-table-column>
      <el-table-column prop="label" label="品名" width="180">
        <!-- <el-table-column label="数量"></el-table-column>
          <el-table-column label="金额"></el-table-column> -->
      </el-table-column>
      <template v-for="(item, index) in category">
        <el-table-column :key="index" :label="item.label">
          <template v-for="(i, idx) in label">
            <el-table-column
              prop="money"
              :label="i.label"
              :key="idx"
              v-if="item.id === i.pid"
            >
              <template slot-scope="scope">
                <!-- {{scope.row}} -->
                <!-- {{changeaaa(scope)}} -->
              </template>
                <!-- <el-input v-model="value"></el-input> -->
              <!-- <template slot-scope="scope" v-if="scope.row['label'] === '金额'">
                {{scope.row}}
                {{scope.row['money']}}
                <span v-if="scope.row['label'] === '金额'">{{scope.row['money']}}</span>
                <span v-if="scope.row['label'] === '数量'">{{ scope.row['count'] }}</span>
                 <span>{{ changeMoney(scope) }}</span>
              </template> -->
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
      <el-table
      :data="listData"
      :span-method="objectSpanMethod"
      border
      style="width: 100% margin-top: 20px"
      @cell-click="handle"
    >
      <el-table-column prop="date" label="时间" width="180"> </el-table-column>
      <el-table-column prop="label" label="品名" width="180">
      </el-table-column>
        <el-table-column  :label="粮食类">
            <el-table-column
              prop=""
              label="大米"
            >
            <el-table-column
              prop=""
              label="面粉"
            >
            </el-table-column>
        </el-table-column>
        <el-table-column  :label="调味类">
            <el-table-column
              prop=""
              label="酱油"
            >
            <el-table-column
              prop=""
              label="醋"
            >
            </el-table-column>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      time: new Date(),
      sign: '',
      dialogVisible: false,
      category: [
        {
          id: 1,
          label: '粮食类'
        },
        {
          id: 2,
          label: '调味类'
        }
      ],
      label: [
        {
          pid: 1,
          label: '大米',
          money: 10
        },
        {
          pid: 1,
          label: '挂面',
          money: 11
        },
        {
          pid: 2,
          label: '酱油',
          money: 3
        },
        {
          pid: 2,
          label: '醋',
          money: 3
        }
      ],
      listData: [
        // { count: 1, money: 10 },
        // { count: 1, money: 10 },
        // { count: 1, money: 10 },
        // { count: 1, money: 10 }
        {
          date: '2022-01-01',
          count: 1,
          label: '金额',
          money: 111
        },
        {
          date: '2022-01-01',
          label: '数量',
          count: 2
        }

      ]
    }
  },
  computed: {
    // changeMoney (row) {
    //   // console.log('row: ', row)
    //   return '你好'
    // }
  },
  mounted () {
    // 获取表头
  },
  methods: {
    changeaaa (arr) {
      console.log('arr: ', arr)
      // arr.forEach(item)
    },
    changeMoney (scope) {
      // console.log('scope: ', scope)
      // debugger
      const { $index, row } = scope
      if (($index / 2) === 0) {
        return row.money
      } else {
        return row.count
      }
    },
    handle (row) {
      console.log('row: ', row)
      // let a = { "date": "2022-01-01", "momey": 1, "label": "金额" }
      // console.log('a : ', a["momey"] )
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1
      //     }
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     }
      //   }
      // }
    },
    getHeader () {
      let params = {
        year: this.changeDate(this.time, 'yyyy'),
        month: this.changeDate(this.time, 'mm')
      }
      console.log('params: ', params)
    },

    handleChange (val) {
      this.getHeader()
    },
    sure () { },
    init (sign) {
      this.sign = sign
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
.top {
  margin-bottom: 20px;
}
.el-button {
  margin-left: 50px;
}
</style>
